<template>
  <div class="chat-room">
    <div class="chat-header">
      <router-link to="/" class="back-btn">← 返回主页</router-link>
      <div class="header-center">
        <div class="chat-title">{{ title }}</div>
        <div class="chat-id">会话ID：{{ chatId }}</div>
      </div>
    </div>
    <div class="chat-history">
      <div v-for="(msg, idx) in messages" :key="idx" :class="['msg-row', msg.role]">
        <div class="bubble-wrap" :class="msg.role">
          <img
            v-if="msg.role === 'ai'"
            class="avatar ai-avatar"
            :src="aiAvatar"
            alt="AI头像"
          />
          <div class="bubble">
            <span>{{ msg.content }}</span>
            <span class="bubble-time">{{ formatTime(msg.time) }}</span>
          </div>
          <img
            v-if="msg.role === 'user'"
            class="avatar user-avatar"
            src="/user.png"
            alt="用户头像"
          />
        </div>
      </div>
    </div>
    <div class="chat-input">
      <input v-model="inputValue" @keyup.enter="send" placeholder="请输入消息..." />
      <button @click="send">发送</button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  onSend: Function,
  messages: Array,
  input: String,
  setInput: Function,
  title: String,
  chatId: String
})

const aiAvatar = computed(() => {
  if (props.title && props.title.includes('旅游')) {
    // return '/ai-love.png'
    return '/ai.png'
  } else {
    // return '/ai-super.png'
    return '/ai.png'
  }
})

const inputValue = computed({
  get: () => props.input,
  set: (val) => props.setInput(val)
})

const send = () => {
  if (props.input.trim()) {
    props.onSend(props.input)
    props.setInput('')
  }
}

function formatTime(time) {
  if (!time) return ''
  const date = new Date(time)
  const h = date.getHours().toString().padStart(2, '0')
  const m = date.getMinutes().toString().padStart(2, '0')
  return `${h}:${m}`
}
</script>

<style scoped>
.chat-room {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f7f9fb;
  border-radius: 16px;
  box-shadow: 0 2px 16px #e0e6ed;
  max-width: 600px;
  margin: 32px auto;
  overflow: hidden;
}
.chat-header {
  background: #3b82f6;
  color: #fff;
  padding: 0 24px;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  align-items: center;
  height: 70px;
  position: relative;
}
.back-btn {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  padding: 0 8px;
  border-radius: 6px;
  transition: background 0.2s;
  margin-right: 12px;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(59,130,246,0.08);
}
.back-btn:hover {
  background: #2563eb;
  color: #fff;
}
.header-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0 auto;
}
.chat-title {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-id {
  font-size: 0.85rem;
  margin-top: 4px;
  opacity: 0.85;
  text-align: center;
  word-break: break-all;
}
.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 24px 12px 12px 12px;
  background: #f7f9fb;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg-row {
  display: flex;
  justify-content: flex-start;
}
.msg-row.user {
  justify-content: flex-end;
}
.bubble-wrap {
  position: relative;
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bubble-wrap.user {
  align-items: flex-end;
}
.bubble {
  background: #e2e2e2;
  color: #222;
  border-radius: 18px;
  padding: 18px 18px 24px 18px;
  font-size: 1.08rem;
  max-width: 100%;
  min-width: 48px;
  word-break: break-word;
  box-shadow: 0 1px 4px #e0e6ed;
  text-align: left;
  position: relative;
}
.bubble-time {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: #888;
  margin-top: 6px;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 6px #e0e6ed;
  background: #fff;
  position: absolute;
  top: -18px;
}
.ai-avatar {
  left: -18px;
  border: 2px solid #e2e2e2;
}
.user-avatar {
  right: -18px;
  border: 2px solid #aee1f9;
}
.bubble-wrap.user .bubble {
  background: #aee1f9;
}
.chat-input {
  display: flex;
  padding: 18px 24px;
  border-top: 1px solid #e0e6ed;
  background: #fff;
}
.chat-input input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border 0.2s;
}
.chat-input input:focus {
  border: 1.5px solid #3b82f6;
}
.chat-input button {
  margin-left: 12px;
  padding: 0 22px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-input button:hover {
  background: #2563eb;
}
@media (max-width: 900px) {
  .chat-room {
    max-width: 98vw;
    margin: 12px auto;
    border-radius: 10px;
  }
  .chat-input {
    padding: 12px 10px;
  }
}
@media (max-width: 600px) {
  .chat-room {
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    height: 100dvh;
  }
  .chat-header {
    padding: 10px 4vw 6px 4vw;
    font-size: 1rem;
  }
  .chat-history {
    padding: 10px 2vw 6px 2vw;
  }
  .bubble {
    font-size: 0.98rem;
    padding: 16px 10px 24px 10px;
    max-width: 92vw;
  }
  .avatar {
    width: 30px;
    height: 30px;
    top: -15px;
  }
  .chat-input {
    padding: 8px 2vw;
  }
  .chat-input input {
    font-size: 0.95rem;
  }
  .chat-input button {
    font-size: 0.95rem;
    padding: 0 12px;
  }
}
</style> 